<div>
  <p-dataGrid [value]="cars" [paginator]="true" [rows]="12">
    <p-header>
      List of Cars
    </p-header>
    <ng-template let-car pTemplate="item">
      <div style="padding:3px" class="ui-g-12 ui-md-3">
        <p-panel [header]="car.vin" [style]="{'text-align':'center'}">
          <img src="assets/showcase/images/demo/car/{{car.brand}}.png" width="60">
          <div class="car-detail">{{car.year}} - {{car.color}}</div>
          <hr class="ui-widget-content" style="border-top:0">
          <a href="javascript:;" class="fa fa-eye" title="查看详情" (click)="selectCar(car)" style="cursor:pointer; font-size: 18px;"></a>
        </p-panel>
      </div>
    </ng-template>
  </p-dataGrid>

  <p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" width="225"
    (onAfterHide)="onDialogHide()">
    <div class="ui-grid ui-grid-responsive ui-grid-pad" *ngIf="selectedCar" style="font-size:16px;text-align:center;padding:20px">
      <div class="ui-grid-row">
        <div class="ui-grid-col-12" style="text-align:center">
          <img src="assets/showcase/images/demo/car/{{selectedCar.brand}}.png">
        </div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Vin: </div>
        <div class="ui-grid-col-8">{{selectedCar.vin}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Year: </div>
        <div class="ui-grid-col-8">{{selectedCar.year}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Brand: </div>
        <div class="ui-grid-col-8">{{selectedCar.brand}}</div>
      </div>
      <div class="ui-grid-row">
        <div class="ui-grid-col-4">Color: </div>
        <div class="ui-grid-col-8">{{selectedCar.color}}</div>
      </div>
    </div>
  </p-dialog>
</div>
